<template>
    <el-form ref="activityRemarkRefForm" label-width="150px" :model="activityRemark" :rules="activityRemarkRules">
        <el-form-item label="ID">
            <div class="detail">{{ activity.id }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="负责人">
            <div class="detail"> {{ activity.ownerDO.name }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="活动名称">
            <div class="detail">{{ activity.name }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="开始时间">
            <div class="detail">{{ activity.startTime }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="结束时间">
            <div class="detail">{{ activity.endTime }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="活动预算">
            <div class="detail">{{ activity.cost }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="活动描述">
            <div class="detail">{{ activity.description }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="创建时间">
            <div class="detail">{{ activity.createTime }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="创建人">
            <div class="detail">{{ activity.createByDO.name }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="编辑时间">
            <div class="detail">{{ activity.editTime }}&nbsp;</div>
        </el-form-item>
        <el-form-item label="编辑人">
            <div class="detail">{{ activity.editByDO.name }}&nbsp;</div>
        </el-form-item>

        <el-form-item label="填写备注" prop="noteContent">
            <el-input v-model="activityRemark.noteContent" :rows="8" type="textarea" placeholder="请输入活动备注" />
        </el-form-item>

        <el-form-item>
            <el-table :data="activityRemarkPageInfo.list" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column property="noteContent" label="备注内容" />
                <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
                <el-table-column property="createByDO.name" label="创建人" />
                <el-table-column property="editTime" label="编辑时间" show-overflow-tooltip />
                <el-table-column property="editByDO.name" label="编辑人" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination background layout="prev, pager, next, jumper, total" :total="activityRemarkPageInfo.total"
                :page-size="activityRemarkPageInfo.pageSize" @change="toPage" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="activityRemarkSubmit(activityRemarkRefForm)">提 交</el-button>
            <el-button @click="goBack">返 回</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { inject, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { doGet, doPost } from '../http/httpRequest'
import { showMessage } from "../util/message";

let activityRemarkRules= {
 noteContent : [
 { required: true, message:'请输入活动备注', trigger: 'blur' },
 { min: 5, max: 255,message: '活动备注必须是5-255个字符', trigger:
 'blur' },
 ]
 }

let activity = ref({
    ownerDO: {},
    createByDO: {},
    editByDO: {}
})

let router = useRouter();//调路由方法

let flashPage = inject('flush');

let activityRemark = ref({})

let activityRemarkRefForm = ref()

let activityRemarkPageInfo = ref({})

let route = useRoute()//获取路由信息

//返回
const goBack = () => {
    router.back();
}

onMounted(() => {
    loadActive();
})

const loadActive = () => {
    //获取url中的id
    let id = useRoute().params.activityId

    //根据id查询用户详情
    doGet('/api/activity/' + id, {}).then(resp => {
        console.log(resp.data.code)

        if (resp.data.code == 200) {
            //将用户详情赋值给user对象
            activity.value = resp.data.info

            //如果用户的创建人或编辑人为空，则创建一个空对象 不是null
            if (!resp.data.info.createByDO) {
                activity.value.createByDO = {}
            }
            //如果用户的编辑人为空，则创建一个空对象 不是null
            if (!resp.data.info.editByDO) {
                activity.value.editByDO = {}
            }
            //如果用户的拥有人为空，则创建一个空对象 不是null
            if (!resp.data.info.ownerDO) {
                activity.value.ownerDO = {}
            }
        } else {
            showMessage(resp.data.msg, 'error')
        }
    })
}

//活动备注提交
const activityRemarkSubmit = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            doPost('/api/activity/remark', {
                activityId: activity.value.id,
                noteContent: activityRemark.value.noteContent
            }).then(resp => {
                if (resp.data.code == 200) {
                    showMessage('提交成功', 'success')
                    flashPage() // 修正拼写错误
                } else {
                    showMessage(resp.data.msg || '提交失败', 'error') // 显示具体错误信息
                }
            })
        }
    });
}

//获取列表
const loadActivityRemarkPage = (current) => {
    let activityId = route.params.activityId;
    doGet('/api/activity/remark', {
        activityId: activityId, // 传递活动ID
        current: current
    }).then(resp => {
        if (resp) {
            if (resp.data.code === 200) {
                activityRemarkPageInfo.value = resp.data.info;
            } else {
                showMessage('数据加载失败', 'error');
            }
        }
    })
}

onMounted(() => {
    loadActivityRemarkPage(1); 
})

const toPage = (currentPage, pageSize) => {
    loadActivityRemarkPage(currentPage); 
}

//编辑
const edit = (id) => {

}

//删除
const del = (id) => {

}

</script>